<template>
  <div class="StockInquiry">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item
              label="代理商名称"
              :label-col="{ span: 6}"
              :wrapper-col="{ span: 16, offset: 1}"
            >
              <a-input
                placeholder="请输入"
                v-decorator="[
          'agentName',
          {rules: [{ required: true, message: '请输入代理商名称!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="点位名称" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'ptname',
          {rules: [{ required: true, message: '请输入点位名称!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="网点名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select
                v-decorator="[
          'branchName',
          {rules: [{ required: true, message: '请选择网点名称!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option value="1">全部</a-select-option>
                <a-select-option value="2">测试网点001</a-select-option>
                <a-select-option value="3">测试网点002</a-select-option>
                <a-select-option value="4">测试网点003</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'facilityNumber',
          {rules: [{ required: true, message: '请选择设备编号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="库存状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-select
                v-decorator="[
          'inventoryStatus',
          {rules: [{ required: true, message: '请选择库存状态!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option value="1">全部</a-select-option>
                <a-select-option value="2">正常</a-select-option>
                <a-select-option value="3">告警</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="是否有异常"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16,offset:1 }"
            >
              <a-select
                v-decorator="[
          'isAbnormal',
          {rules: [{ required: true, message: '请选择是否有异常!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option value="1">全部</a-select-option>
                <a-select-option value="2">有</a-select-option>
                <a-select-option value="3">无</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="23" :style="{ textAlign: 'right' }">
            <a-button type="primary">查询</a-button>
            <a-button type="dashed">导出</a-button>
            <a-button>重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="isAbnormal">
          <span>查看异常</span>
        </template>
        <template slot="operation">
          <router-link to="/">
            <div class="key">详情</div>
          </router-link>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: "点位名称",
    dataIndex: "ptName",
    scopedSlots: { customRender: "ptName" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "facilityNumber",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  },
  {
    title: "点位地址",
    dataIndex: "ptSite",
    scopedSlots: { customRender: "ptSite" },
    align: "center"
  },
  {
    title: "代理商",
    dataIndex: "agent",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "是否有异常",
    dataIndex: "isAbnormal",
    scopedSlots: { customRender: "isAbnormal" },
    align: "center"
  },
  {
    title: "剩余库存",
    dataIndex: "surplusInventory",
    scopedSlots: { customRender: "surplusInventory" },
    align: "center"
  },
  {
    title: "标准库存",
    dataIndex: "normInventory",
    scopedSlots: { customRender: "surplusInventory" },
    align: "center"
  },
  {
    title: "库存阈值",
    dataIndex: "inventoryThreshold",
    scopedSlots: { customRender: "inventoryThreshold" },
    align: "center"
  },
  {
    title: "库存状态",
    dataIndex: "inventoryStatus",
    scopedSlots: { customRender: "inventoryStatus" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];
const data = [
  {
    key: "1",
    ptName: "测试点位名称001",
    facilityNumber: "C1232",
    ptSite: "上海市闵行区金都路1343好科技大楼21楼",
    agent: "代理商001",
    // isAbnormal: ["查看异常"],
    surplusInventory: "30",
    normInventory: "50",
    inventoryThreshold: "60%",
    inventoryStatus: "正常",
    operation: "详情"
  }
  // {
  //   key: "2"
  // },
  // {
  //   key: "3"
  // }
];
export default {
  name: "StockInquiry",
  data() {
    return {
      form: this.$form.createForm(this),
      rangeConfig: {
        rules: [
          { type: "array", required: true, message: "Please select time!" }
        ]
      },
      data,
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 2,
        defaultCurrent: 1,
        current: 1,
        total: 5
      },
      loading: false,
      visible: false
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        console.log("error", error);
        console.log("Received values of form: ", values);
      });
    },
    callback(key) {
      console.log(key);
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    }
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.StockInquiry {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
.key {
  color: rgb(98, 144, 255);
}
</style>
